<template>
  <view class="mask" v-if="loading">
    <view class="loading">
      <view class="dot dot-1"></view>
      <view class="dot dot-2"></view>
      <view class="dot dot-3"></view>
    </view>
  </view >
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  created() {
    uni.$on('showLoading', data => {
      this.loading = true
    })
    uni.$on('hideLoading', data => {
      this.loading = false
    })
  }
};
</script>

<style lang="scss" scoped>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: .3);
    z-index: 2023;
  }

  /* 
    animation-duration: 2s;
    animation-delay: -0.3s;
    动画开始动时间：2 * 20% - 0.3s
  */

  .loading {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate-move 2s ease-in-out infinite;
    animation-delay: -0.3s;
  }

  .dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .dot-3 {
    background-color: #f74d75;
    animation: dot-3-move 2s ease infinite;
    animation-delay: -0.3s;
  }
  .dot-2 {
    background-color: #10beae;
    animation: dot-2-move 2s ease infinite;
    animation-delay: -0.3s;
  }

  .dot-1 {
    background-color: #ffe386;
    animation: dot-1-move 2s ease infinite;
    animation-delay: -0.3s;
  }

  @keyframes dot-3-move {
    20% {
      transform: scale(1)
    }

    45% {
      transform: translateY(-25px) scale(.50)
    }

    60% {
      transform: translateY(-60px) scale(.50)
    }

    80% {
      transform: translateY(-60px) scale(.50)
    }

    100% {
      transform: translateY(0px) scale(1)
    }
  }

  @keyframes dot-2-move {
    20% {
      transform: scale(1)
    }

    45% {
      transform: translate(-20px, 16px) scale(.50)
    }

    60% {
      transform: translate(-48px, 36px) scale(.50)
    }

    80% {
      transform: translate(-48px, 36px) scale(.50)
    }

    100% {
      transform: translateY(0px) scale(1)
    }
  }

  @keyframes dot-1-move {
    20% {
      transform: scale(1)
    }

    45% {
      transform: translate(20px, 16px) scale(.50)
    }

    60% {
      transform: translate(48px, 36px) scale(.50)
    }

    80% {
      transform: translate(48px, 36px) scale(.50)
    }

    100% {
      transform: translateY(0px) scale(1)
    }
  }

  @keyframes rotate-move {
    55% {
      transform: translate(-50%, -50%) rotate(0deg)
    }

    80% {
      transform: translate(-50%, -50%) rotate(360deg)
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }
</style>